<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/users.css">
  <title>
    <%= title %>
  </title>
</head>

<body>
  <div class="header">
    <a href="/">Home</a> / Users
  </div>
  <div class="content">
    <div class="add">
      <form action="/users?_method=post" method="post">
        <label for="name">Name: </label>
        <input type="text" name="name" placeholder="name" required>
        <br /><br />
        <button type="submit">Add</button>
      </form>
    </div>
    <div class="user-list">
      <form action="/users?_method=delete" method="post">
        <ol>
          <% for (let i=0; i < users.length; i++) { %>
            <li>
              <span>
                <%= i + 1 %>.
                  <a href="/users/<%= users[i].id %>">
                    <%= users[i].name %>
                  </a>
              </span>
              <div>
                <button type="submit" name="id" value="<%= users[i].id %>">
                  Delete
                </button>
              </div>
            </li>
            <% } %>
        </ol>
      </form>
    </div>
  </div>
</body>

</html>